<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>realize a MVVM framework</title>
    <style type="text/css">
        #p_text {
            font-size: 40px;
        }
        #tpl1 {
            width: 100px;
            height: 100px;
            background: red;
        }
        
    </style>
</head>
<body>

<div id="tpl2">
    <button v-on:click = "change">点击</button>
    <!-- <p v-text = "modelStr" id = "p_text"></p> -->

    <div id="for" v-for="li in list">
        <div id="forItem1" v-for="i in li.age">
            <p id="forItem1Item" v-text="i" v-if="show"></p>
        </div>
        <p id="forItem2" v-text="li.name"></p>
    </div>
    <!-- <input v-model = "modeStr"></input> -->
</div>

<script src="./test/vue-1.0.28.js"></script>
<script>

    var app = new Vue({
        el: '#tpl2',
        data: {
            show:true,
            list: [
                {
                    name:11,
                    age:[1,2,3,4,5]
                },
                {
                    name:211,
                    age:[1,2,3,4,5]
                },{
                    name:311,
                    age:[1,2,3,4,5]
                }]
        },
        methods:{
            change: function(){
                this.list.$set({
                    name:111,
                    age:[1,2,3,4,5]
                },
                {
                    name:2111,
                    age:[1,2,3,4,5]
                },{
                    name:3111,
                    age:[1,2,3,4,5]
                })
            }
        }
    })

</script>

</body>
</html>